<!--
 * @Author: yuanweijiang
 * @Date: 2025-04-01 14:19:48
 * @LastEditors: XHM
-->
<template>
	<el-dialog :title="state.title" width="350" v-model="state.visible" :close-on-click-modal="false" draggable>
		<el-form ref="dialogFormRef" :model="state.queryForm" :rules="dataRules">
			<el-form-item prop="layerInfo" label="所属组" v-if="state.queryForm.parentId">
				<el-input placeholder="请输入所属组" disabled clearable v-model="state.queryForm.parentName" />
			</el-form-item>
			<el-form-item prop="serviceCatalogName" label="组名称">
				<el-input placeholder="请输入组名称" clearable v-model="state.queryForm.serviceCatalogName" />
			</el-form-item>
			<el-form-item prop="serviceCatalogDesc" label="组描述">
				<el-input placeholder="请输入组描述" clearable v-model="state.queryForm.serviceCatalogDesc" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="flex gap-5 justify-center">
				<el-button type="info" class="dialogTrue" @click="resetHandle">取消</el-button>
				<el-button type="primary" class="dialogTrue" @click="onSubmit">保存</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="addLayerDialog">
import { useMessage } from '/@/hooks/message';
import { addBizServiceCatalog, updateServiceCatalog } from '/@/api/datasource';
import { getIdProject } from '/@/api/admin/role';
import { geoLayerList } from '/@/api/project';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 引入组件

// 定义变量内容
const dialogFormRef = ref();
// 定义需要的数据
const state = reactive({
	visible: false,
	queryForm: {},
});

// 表单校验规则
const dataRules = reactive({
	serviceCatalogName: [{ required: true, message: '组名称不能为空', trigger: 'blur' }],
	serviceCatalogDesc: [{ required: true, message: '组描述不能为空', trigger: 'blur' }],
});
function resetHandle() {
	dialogFormRef.value.resetFields();
	state.visible = false;
}
// 打开弹窗
const openDialog = (val: any) => {
	const { visible = true, queryForm = {}, title = '创建组' } = val;
	Object.assign(state, { visible, queryForm, title });
};

// 保存数据
const onSubmit = async () => {
	const valid = await dialogFormRef.value.validate().catch(() => {});
	if (!valid) return false;
	if (state.queryForm.serviceCatalogId) {
	
		try {
			let newForm = {
				serviceCatalogDesc:	state.queryForm.serviceCatalogDesc,
				serviceCatalogId:state.queryForm.serviceCatalogId,
				serviceCatalogName:state.queryForm.serviceCatalogName,
			}
			await updateServiceCatalog(newForm);
			useMessage().success('修改成功');
			state.visible = false;
			emit('refresh');
		} catch (error) {}
		//编辑
	} else {
		// delete state.queryForm.parentId
		delete state.queryForm.parentName
		try {
			await addBizServiceCatalog(state.queryForm);
			useMessage().success('添加成功');
			state.visible = false;
			emit('refresh');
		} catch (error) {}
	}
};

// 暴露变量 只有暴漏出来的变量 父组件才能使用
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.dialog-footer {
	display: flex;
	justify-content: center;
}

.blue-card {
	margin: 5px;
	padding: 10px;
	border-radius: 8px;
	background: #eaf1ff;
}
</style>
